import React from 'react';
import { Typography } from 'antd';
import Link from 'next/link';
const { Text, Paragraph } = Typography;
const baseInfoStyle: React.CSSProperties = {
  padding: '14px 0 2px',
  borderRadius: '10px',
  bottom: '-13px',
  width: '100%',
};
const baseInfoTitleStyle: React.CSSProperties = {
  height: '26px',
  fontSize: '16px',
  fontWeight: 500,
  color: '#3C3C3C',
  lineHeight: '26px',
  marginBottom: 4,
};
const baseInfoTimeStyle: React.CSSProperties = {
  // fontSize: '14px',
  // color: '#909399',
  // lineHeight: '20px',
  // marginBottom: 4,
  display: 'flex',
};

export default function BaseInfoComponent({
  id,
  title,
  time,
  desc,
  className,
}: {
  id: string;
  title: string;
  time?: string;
  desc?: string;
  className?: string;
}) {
  return (
    <Link className="flex items-center justify-between" href={'/posts/' + id}>
      <div
        className={'base-info w-full ' + className}
        style={{
          ...baseInfoStyle,
        }}
      >
        <div>
          <Text
            ellipsis={true}
            className="font-semibold base-info-title text-color cursor-pointer time-text"
            style={baseInfoTitleStyle}
          >
            {title}
          </Text>
        </div>
        <div style={baseInfoTimeStyle} className="time-text">
          {time}
        </div>
        {desc && (
          <div>
            <Paragraph ellipsis={{ rows: 2 }} className="description-text">
              {desc}
            </Paragraph>
          </div>
        )}
      </div>
    </Link>
  );
}
